<template>
  <a-modal v-model="visible" width="60%" height="736px" :maskClosable="false">
    <template slot="title">
      <span>订单编号：{{ modalData.orderNumber }}</span>
      <span style="margin-left: 25px"
        >仓库名称：{{ modalData.warehouseName }}</span
      >
      <span
        :style="
          modalData.addressVerify
            ? 'margin-left:5rem;color:#3EAE7C;'
            : 'margin-left:5rem;color:red;'
        "
      >
        <span>
          {{ modalData.addressVerify ? "地址检验通过" : "地址检验不通过" }}
        </span>
        <a-button
          type="primary"
          size="small"
          @click="checksIte"
          :loading="checksIteLoding"
        >
          重新效验地址
        </a-button>
      </span>
    </template>
    <template slot="footer">
      <div class="modelBtn">
        <a-button
          @click="visible = false"
          style="background: #d7d7d7; border: none; color: #fff"
          >关闭</a-button
        >

        <a-button
          v-if="OutOrderKeys === '15'"
          :loading="loading"
          @click="handleMenuClick('pass')"
          style="margin-left: 8px"
          type="primary"
          >提交处理</a-button
        >

        <a-dropdown
          v-if="
            (OutOrderKeys === '25' && userId === modalData.claimId) ||
            (OutOrderKeys === '25' && modalData.claimId === null)
          "
        >
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="1"> 确认发货 </a-menu-item>
            <a-menu-item key="2"> 异常处理</a-menu-item>
            <a-menu-item key="3"> 暂缓处理 </a-menu-item>
            <a-menu-item key="4" v-if="!modalData.waybillNo"> 退回处理 </a-menu-item>
          </a-menu>

          <a-button style="margin-left: 8px" type="primary" :loading="loading">
            处理操作 <a-icon type="down" />
          </a-button>
        </a-dropdown>

        <a-dropdown
          v-if="
            (OutOrderKeys === '45' && userId === modalData.claimId) ||
            (OutOrderKeys === '45' && modalData.claimId === null)
          "
        >
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="5"> 提交处理 </a-menu-item>
            <a-menu-item key="3"> 暂缓处理 </a-menu-item>
            <a-menu-item key="4" v-if="!modalData.waybillNo"> 退回处理 </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px" type="primary" :loading="loading">
            处理操作 <a-icon type="down" />
          </a-button>
        </a-dropdown>
        <a-dropdown
          v-if="
            (OutOrderKeys === '55' && userId === modalData.claimId) ||
            (OutOrderKeys === '55' && modalData.claimId === null)
          "
        >
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="5"> 提交处理 </a-menu-item>
            <a-menu-item key="4" v-if="!modalData.waybillNo"> 退回处理 </a-menu-item>
            <a-menu-item key="2"> 异常处理</a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px" type="primary" :loading="loading">
            处理操作 <a-icon type="down" />
          </a-button>
        </a-dropdown>
      </div>
    </template>

    <a-row>
      <a-col :span="4">
        <b>销售平台：</b>
        {{
          modalData.platformName === null || modalData.platformName === ""
            ? "暂无"
            : modalData.platformName
        }}
      </a-col>
      <a-col :span="4">
        <b>店铺：</b>
        {{
          modalData.store === null || modalData.store === ""
            ? "暂无"
            : modalData.store
        }}
      </a-col>
      <a-col :span="4">
        <b>收件人：</b>
        {{
          modalData.recipient === null || modalData.recipient === ""
            ? "暂无"
            : modalData.recipient
        }}
      </a-col>
      <a-col :span="4">
        <b>电话：</b>
        {{
          modalData.contactPhone === null || modalData.contactPhone === ""
            ? "暂无"
            : modalData.contactPhone
        }}
      </a-col>
      <a-col :span="4">
        <b>邮编：</b>
        {{
          modalData.postalCode === null || modalData.postalCode === ""
            ? "暂无"
            : modalData.postalCode
        }}
      </a-col>
    </a-row>
    <a-row style="margin: 10px 0">
      <a-col :span="4">
        <b>国家：</b>
        {{
          modalData.countryName === null || modalData.countryName === ""
            ? "暂无"
            : modalData.countryName
        }}
      </a-col>
      <a-col :span="4">
        <b>州/市：</b>
        {{
          modalData.provinceName === null || modalData.provinceName === ""
            ? "暂无"
            : modalData.provinceName
        }}
      </a-col>
      <a-col :span="4">
        <b>城市：</b>
        {{
          modalData.city === null || modalData.city === ""
            ? "暂无"
            : modalData.city
        }}
      </a-col>
      <a-col :span="8">
        <b>地址：</b>
        {{
          modalData.firstAddress === null || modalData.firstAddress === ""
            ? "暂无"
            : modalData.firstAddress
        }}
      </a-col>
    </a-row>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table
        style="margin-bottom: 15px"
        bordered
        size="small"
        :columns="columns"
        :data-source="modalData.recordList"
        :pagination="false"
      >
        <span slot="boxSize" slot-scope="text, record">
          {{ record.lengthNumber }}*{{ record.wideNumber }}*{{
            record.highNumber
          }}
        </span>
      </a-table>

      <a-collapse v-model="activeKey">
        <a-collapse-panel key="1" :style="customStyle">
          <span slot="header"
            >包裹物流及费用
            <a-icon
              type="edit"
              v-if="
                (!editBoxSizeFlag &&
                  OutOrderKeys != '35' &&
                  userId === modalData.claimId) ||
                (!editBoxSizeFlag &&
                  OutOrderKeys != '35' &&
                  modalData.claimId === null)
              "
              @click.stop="editBoxSize"
              style="margin-left: 10px; font-size: 20px"
            />
            <a-icon
              v-if="editBoxSizeFlag"
              @click.stop="saveBoxSize"
              type="check-circle"
              style="margin-left: 10px; font-size: 20px"
            />
            <a-icon
              v-if="editBoxSizeFlag"
              @click.stop="editBoxSizeFlag = false"
              type="close-circle"
              style="margin-left: 10px; font-size: 20px"
            />
          </span>

          <a-table
            bordered
            size="small"
            :columns="logisticsColumns"
            :data-source="modalTabArry"
            :pagination="false"
          >
            <span slot="boxSize" slot-scope="text, record">
              <span v-if="!editBoxSizeFlag">
                {{ record.lengthNumber }}*{{ record.widthNumber }}*{{
                  record.heightNumber
                }}
              </span>
              <span v-else>
                <a-input-number
                  size="small"
                  placeholder="长"
                  style="width: 4rem"
                  v-model="record.lengthNumber"
                  :min="1"
                  @change="
                    () => {
                      record.lengthNumber <= 0
                        ? (record.lengthNumber = 1)
                        : record.lengthNumber;
                    }
                  "
                />
                *
                <a-input-number
                  size="small"
                  placeholder="宽"
                  style="width: 4rem"
                  v-model="record.widthNumber"
                  :min="1"
                  @change="
                    () => {
                      record.widthNumber <= 0
                        ? (record.widthNumber = 1)
                        : record.widthNumber;
                    }
                  "
                />
                *<a-input-number
                  size="small"
                  placeholder="高"
                  style="width: 4rem"
                  v-model="record.heightNumber"
                  :min="1"
                  @change="
                    () => {
                      record.heightNumber <= 0
                        ? (record.heightNumber = 1)
                        : record.heightNumber;
                    }
                  "
                />
              </span>
            </span>
            <span slot="weight" slot-scope="text, record">
              <span v-if="!editBoxSizeFlag">
                {{ record.weightNumber }}
              </span>
              <span v-else>
                <a-input-number
                  size="small"
                  placeholder="重量"
                  style="width: 60%"
                  v-model="record.weightNumber"
                  :min="1"
                  @change="
                    () => {
                      record.weightNumber <= 0
                        ? (weightNumber = 1)
                        : record.weightNumber;
                    }
                  "
                />
              </span>
            </span>
            <span slot="service">
              <span v-if="OutOrderKeys === '25' || OutOrderKeys === '35'">
                <a-button
                  v-if="
                    OutOrderKeys === '25' && modalData.isServiceItem * 1 === 0
                  "
                  size="small"
                  type="primary"
                  @click="outOrderService"
                >
                  服务项登记
                </a-button>
                <a-button
                  v-else
                  size="small"
                  type="primary"
                  @click="costServiceInfo"
                >
                  服务项登记查看
                </a-button>
              </span>

              <span v-else>暂无</span>
            </span>
          </a-table>

          <a-table
            bordered
            size="small"
            :columns="SKUColumns"
            :data-source="modalTabArry"
            :pagination="false"
          >
            <span slot="logisticsCost" slot-scope="text, record">
              {{ record.logisticsCost }}{{ record.currency }}
            </span>
            <span slot="insuredAmount" slot-scope="text, record">
              {{ record.insuredAmount }}{{ record.currency }}
            </span>
          </a-table>
        </a-collapse-panel>
        <a-collapse-panel key="2" header="物流服务商询价" :style="customStyle">
          <a-table
            bordered
            size="small"
            :columns="logisticsService"
            :data-source="modalTabArry"
            :pagination="false"
          >
            <span slot="waybillNo" slot-scope="text, record">
              <a
                v-if="record.isEctn != '1'"
                @click="upLoadWaybillFile"
                href="javascript:;"
                style="text-decoration: underline; color: rgb(41, 41, 224)"
                >{{ record.waybillNo }}</a
              >
              <a
                target="_blank"
                v-if="record.isEctn === '1'"
                :href="record.ectnFile"
                style="text-decoration: underline; color: rgb(41, 41, 224)"
                >{{ record.ectnNo }}</a
              >
            </span>
            <span slot="actions" slot-scope="text, record">
              <a-button
                @click="cancelOrder"
                type="primary"
                :loading="cancelOrderloading"
                size="small"
                :disabled="record.waybillNo === null || record.waybillNo === ''"
                v-if="modalData.applyState != '35'"
              >
                取消运单并退款
              </a-button>
            </span>
          </a-table>

          <h3>
            物流商询价
            <a-button type="primary" @click="updateTable" size="small">
              刷新报价
            </a-button>
          </h3>

          <a-table
            :scroll="{ y: 300, x: 770 }"
            bordered
            size="small"
            :columns="logisticsServices"
            :data-source="logisticsServicesArry"
            :pagination="false"
          >
            <span slot="rate" slot-scope="text, record">
              {{ record.rate || 0 }} USD
            </span>
            <span slot="actions" slot-scope="text, record">
              <a-button
                type="primary"
                @click="createFile(record)"
                :loading="record.createFileloading"
                size="small"
                :disabled="
                  modalData.waybillNo != null && modalData.waybillNo != ''
                "
                v-if="modalData.applyState != '35'"
              >
                生成运单
              </a-button>
            </span>
          </a-table>
        </a-collapse-panel>
        <a-collapse-panel key="3" header="操作记录" :style="customStyle">
          <a-steps :current="timeline.length - 1">
            <a-step v-for="(item, i) in timeline" :key="i">
              <template slot="title"> {{ item.operation }} </template>
              <span slot="description"
                >{{ item.createdTime.replace("T", "  ") }} <br />
                {{ item.createdBy }}
              </span>
            </a-step>
          </a-steps>
        </a-collapse-panel>
      </a-collapse>
    </a-spin>
    <h3>客户备注：</h3>
    {{
      modalData.remark === null || modalData.remark === ""
        ? "暂无"
        : modalData.remark
    }}
    <!-- <h3>仓库备注：</h3>
    {{
      modalData.remark === null || modalData.remark === ""
        ? "暂无"
        : modalData.remark
    }} -->

    <!-- 出库订单服务项 -->
    <OutOrderService :getModalData="getModalData" />
    <!-- 服务项信息查看 -->
    <ServiceModalReap :getModalData="getModalData" />
  </a-modal>
</template>

<script>
import ServiceModalReap from "@/components/serviceModal/ServiceModalReap.vue";
import {
  OutBound_addBuy,
  OutBound_rowInfo,
  OutBound_updateState,
  OutBound_sysLog,
  OutBound_updateParcel,
  OutBound_dowWay,
  OutBound_addressVerify,
  OutBound_refund,
} from "@/apis/system/WM/OutOrder";
import req from "@/utils/req.js";
import OutOrderService from "./OutOrderService.vue";
export default {
  props: ["getStateCount", "getOutOrderList", "OutOrderKeys"],
  components: {
    OutOrderService,
    ServiceModalReap,
  },
  data() {
    return {
      spinning: false,
      editBoxSizeFlag: false,
      timeline: [],
      customStyle:
        "color:#fff;background: #dfede4;border-radius: 4px;overflow: hidden;",
      activeKey: [],
      waybillFile: "",
      modalData: {},
      modalTabArry: [],
      visible: false,
      // 开始处理
      loading: false,
      checksIteLoding: false,
      rowDataKey: "",
      logisticsServicesArry: [],
      cancelOrderloading: false,
      //用户唯一ID
      userId: "",
    };
  },
  mounted() {
    this.editRowData();
  },
  methods: {
    //费用服务项信息查看
    costServiceInfo() {
      if (this.modalData.applyState === "25") {
        setTimeout(() => {
          this.$bus.$emit(
            "reappearance",
            this.modalData,
            3,
            this.modalData.key,
            true,
            "warehouse"
          );
        }, 50);
      } else {
        setTimeout(() => {
          this.$bus.$emit(
            "reappearance",
            this.modalData,
            3,
            this.modalData.key,
            false,
            "warehouse"
          );
        }, 50);
      }
    },
    //出库订单服务商
    outOrderService() {
      setTimeout(() => {
        this.$bus.$emit("OutOrderService", this.modalData);
      }, 50);
    },
    //取消运单并退款
    cancelOrder() {
      this.cancelOrderloading = true;
      setTimeout(async () => {
        let { code } = await OutBound_refund(this.modalData.shipmentId);
        if (code === "10000") {
          this.getModalData(this.rowDataKey);
          this.cancelOrderloading = false;
          this.getOutOrderList();
        } else {
          this.cancelOrderloading = false;
          // this.getOutOrderList();
        }
      }, 1000);
    },
    //检查地址
    checksIte() {
      this.checksIteLoding = true;
      setTimeout(async () => {
        let { code } = await OutBound_addressVerify(this.modalData.key);
        if (code === "10000") {
          this.getModalData(this.rowDataKey);
          this.checksIteLoding = false;
        } else {
          this.checksIteLoding = false;
        }
      }, 1000);
    },
    //物流服务商刷新
    updateTable() {
      this.getModalData(this.rowDataKey);
    },
    //下载运单文件
    async upLoadWaybillFile() {
      let res = await OutBound_dowWay(`pam=${this.modalData.key}&`);
      req.exportPDF("运单文件", res);
    },
    //保存箱子大小
    async saveBoxSize() {
      if (
        this.modalTabArry[0].heightNumber <= 0 ||
        this.modalTabArry[0].heightNumber === null ||
        this.modalTabArry[0].heightNumber === undefined ||
        this.modalTabArry[0].lengthNumber <= 0 ||
        this.modalTabArry[0].lengthNumber === null ||
        this.modalTabArry[0].lengthNumber === undefined ||
        this.modalTabArry[0].widthNumber <= 0 ||
        this.modalTabArry[0].widthNumber === null ||
        this.modalTabArry[0].widthNumber === undefined ||
        this.modalTabArry[0].weightNumber <= 0 ||
        this.modalTabArry[0].weightNumber === null ||
        this.modalTabArry[0].weightNumber === undefined
      ) {
        this.$message.error("长*宽*高及重量不能为0或为空！");
        return false;
      }

      let { code } = await OutBound_updateParcel({
        heightNumber: String(this.modalTabArry[0].heightNumber),
        lengthNumber: String(this.modalTabArry[0].lengthNumber),
        widthNumber: String(this.modalTabArry[0].widthNumber),
        weightNumber: String(this.modalTabArry[0].weightNumber),
        id: String(this.modalTabArry[0].key),
      });
      if (code === "10000") {
        this.editBoxSizeFlag = false;
      }
    },
    //编辑箱子长宽高
    editBoxSize() {
      this.editBoxSizeFlag = true;
    },
    //操作处理
    handleMenuClick(e) {
      if (
        (this.modalTabArry[0].heightNumber ?? "") == "" ||
        (this.modalTabArry[0].lengthNumber ?? "") == "" ||
        (this.modalTabArry[0].widthNumber ?? "") == "" ||
        (this.modalTabArry[0].weightNumber ?? "") == ""
      ) {
        this.$message.error("请编辑长宽高及重量后操作处理！");
        return false;
      }

      if (this.editBoxSizeFlag === true) {
        this.$message.error("请保存后操作处理！");
        return false;
      }
      if (e.key === "1") {
        if (
          (this.modalTabArry[0].waybillNo ?? "") == "" &&
          (this.modalTabArry[0].ectnNo ?? "") == ""
        ) {
          this.$message.error("未生成运单，无法发货！");
          return false;
        }
        this.loading = true;
        setTimeout(async () => {
          let { code } = await OutBound_updateState(`${this.modalData.key}/35`);
          if (code === "10000") {
            this.loading = false;
            this.visible = false;
            this.getStateCount();
            this.getOutOrderList();
          }
        }, 1000);
      } else if (e.key === "2") {
        this.loading = true;
        setTimeout(async () => {
          let { code } = await OutBound_updateState(`${this.modalData.key}/45`);
          if (code === "10000") {
            this.loading = false;
            this.visible = false;
            this.getStateCount();
            this.getOutOrderList();
          }
        }, 1000);
      } else if (e.key === "3") {
        this.loading = true;
        setTimeout(async () => {
          let { code } = await OutBound_updateState(`${this.modalData.key}/55`);
          if (code === "10000") {
            this.loading = false;
            this.visible = false;
            this.getStateCount();
            this.getOutOrderList();
          }
        }, 1000);
      } else if (e.key === "4") {
        this.loading = true;
        setTimeout(async () => {
          let { code } = await OutBound_updateState(`${this.modalData.key}/15`);
          if (code === "10000") {
            this.loading = false;
            this.visible = false;
            this.getStateCount();
            this.getOutOrderList();
          }
        }, 1000);
      } else if (e.key === "5" || e === "pass") {
        this.loading = true;
        setTimeout(async () => {
          let { code } = await OutBound_updateState(`${this.modalData.key}/25`);
          if (code === "10000") {
            this.loading = false;
            this.visible = false;
            this.getStateCount();
            this.getOutOrderList();
          } else {
            // this.$message.error(message);
            this.loading = false;
          }
        }, 1000);
      }
    },
    //生成运单文件
    createFile(record) {
      this.$set(record, "createFileloading", true);
      setTimeout(async () => {
        let { code, message } = await OutBound_addBuy(
          this.modalData.key,
          record
        );
        if (code === "10000") {
          this.getModalData(this.rowDataKey);
          this.disabled = true;
          this.getOutOrderList();
          this.$set(record, "createFileloading", false);
        } else {
          this.$message.error(message);
          this.$set(record, "createFileloading", false);
        }
      }, 500);
    },
    //下载跟踪运单文件
    downloadEctnFile() {
      window.open(this.modalData.ectnFile);
    },
    //接收组件传参
    editRowData() {
      this.$bus.$off("OutOrderRowData");
      this.$bus.$on("OutOrderRowData", async (rowData) => {
        this.visible = true;
        this.spinning = true;
        this.modalTabArry = [];
        this.userId = sessionStorage.getItem("userId");
        this.rowDataKey = rowData.key;
        this.getModalData(rowData.key);
      });
    },
    async getModalData(key) {
      this.spinning = true;
      let { code, responseBody } = await OutBound_rowInfo(key);
      if (code === "200") {
        this.modalTabArry = [];
        this.modalData = { ...responseBody };
        this.waybillFile = this.modalData.waybillFile;
        this.spinning = false;
      }
      this.logisticsServicesArry = responseBody.rates;
      this.modalTabArry.push(responseBody);
      let res = await OutBound_sysLog(key);
      if (res.code === "200") {
        this.timeline = res.responseBody;
      }
    },
  },
  computed: {
    columns() {
      return [
        {
          title: "商品名称",
          dataIndex: "skuName",
          align: "center",
          width: "14%",
          ellipsis: true,
        },
        {
          title: "SKU",
          dataIndex: "sku",
          align: "center",
          // scopedSlots: { customRender: "selfClassifyName" },
          // ellipsis: true,
          width: "15%",
        },
        {
          title: "长*宽*高(cm)",
          dataIndex: "boxSize",
          align: "center",
          scopedSlots: { customRender: "boxSize" },
          // ellipsis: true,
          width: "25%",
        },
        {
          title: "重量(g)",
          dataIndex: "caratNumber",
          align: "center",
          // scopedSlots: { customRender: "selfClassifyName" },
          // ellipsis: true,
          width: "15%",
        },
        {
          title: "标签",
          dataIndex: "productTag",
          align: "center",
          width: "15%",
          // ellipsis: true,
        },
        {
          title: "数量",
          dataIndex: "inputNumber",
          // ellipsis: true,
          scopedSlots: { customRender: "inputNumber" },
          align: "center",
          width: "15%",
        },
      ];
    },
    logisticsColumns() {
      return [
        {
          title: "长*宽*高(cm)",
          dataIndex: "boxSize",
          align: "center",
          width: "25%",
          scopedSlots: { customRender: "boxSize" },
        },
        {
          title: "重量(g)",
          dataIndex: "weight",
          align: "center",
          scopedSlots: { customRender: "weight" },
          // ellipsis: true,
          width: "25%",
        },
        {
          title: "物流服务商",
          dataIndex: "logisticsName",
          align: "center",
          width: "25%",
          // ellipsis: true,
        },
        {
          title: "服务项",
          dataIndex: "service",
          align: "center",
          width: "25%",
          scopedSlots: { customRender: "service" },
          // ellipsis: true,
        },
      ];
    },
    SKUColumns() {
      return [
        {
          title: "物流方式",
          dataIndex: "logisticsService",
          align: "center",
          width: "20%",
          scopedSlots: { customRender: "logisticsService" },
        },
        {
          title: "物流单号",
          dataIndex: "waybillNo",
          align: "center",
          scopedSlots: { customRender: "waybillNo" },
          width: "15%",
        },
        {
          title: "物流费用",
          dataIndex: "logisticsCost",
          align: "center",
          width: "12%",
          scopedSlots: { customRender: "logisticsCost" },
        },
        {
          title: "保险费用",
          dataIndex: "insuredAmount",
          align: "center",
          width: "13%",
          ellipsis: true,
          scopedSlots: { customRender: "insuredAmount" },
        },
      ];
    },
    logisticsService() {
      return [
        {
          title: "物流服务商",
          dataIndex: "logisticsName",
          align: "center",
          width: "13%",
        },
        {
          title: "物流方式",
          dataIndex: "logisticsService",
          align: "center",
          // scopedSlots: { customRender: "selfClassifyName" },
          width: "13%",
        },
        {
          title: "运单号",
          dataIndex: "waybillNo",
          scopedSlots: { customRender: "waybillNo" },
          align: "center",
          width: "13%",
        },
        {
          title: "平台",
          dataIndex: "platformName",
          align: "center",
          width: "13%",
        },
        {
          title: "物流平台",
          dataIndex: "carrier",
          align: "center",
          width: "13%",
        },

        {
          title: "操作",
          dataIndex: "actions",
          align: "center",
          width: "13%",
          scopedSlots: { customRender: "actions" },
        },
      ];
    },
    logisticsServices() {
      return [
        {
          title: "物流服务商",
          dataIndex: "carrier",
          align: "center",
          width: "13%",
        },
        {
          title: "物流方式",
          dataIndex: "service",
          align: "center",
          // scopedSlots: { customRender: "selfClassifyName" },

          width: "13%",
        },
        {
          title: "价格",
          dataIndex: "rate",
          align: "center",
          width: "13%",
          scopedSlots: { customRender: "rate" },
        },
        {
          title: "时效(天)",
          dataIndex: "deliveryDays",
          align: "center",
          width: "13%",
        },
        {
          title: "报价时间",
          dataIndex: "updatedAt",
          align: "center",
          width: "13%",
        },
        {
          title: "渠道",
          dataIndex: "serviceCode",
          align: "center",
          width: "13%",
          // ellipsis: true,
        },
        {
          title: "操作",
          dataIndex: "actions",
          align: "center",
          width: "13%",
          // ellipsis: true,
          // fixed: "right",
          scopedSlots: { customRender: "actions" },
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.modelBtn {
  width: 60%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  text-align: center;
}
.is-weight {
  input {
    width: 50px;
  }
}
.info p {
  display: flex;
  justify-content: space-between;
  span {
    flex: 1;
  }
}
.other-info p {
  display: flex;
  justify-content: space-between;
  span {
    flex: 1;
  }
}
.address-info p {
  display: flex;
  span {
    flex: 1;
  }
}
/deep/.ant-empty-normal {
  margin: 0 !important;
}
</style>